<template>
  <div>
    <!--顶部标题 -->
    <div>
      <x-header
        :left-options="{ backText: '', showBack: false }"
        @on-click-more="showMenusOfPersonalInfo = true"
        >{{ locationTitle }}</x-header
      >
    </div>
    <!--选项卡-->
    <div>
      <tab :line-width="2" active-color="#1abc9c">
        <tab-item
          v-for="(item, index) in tabItems"
          :key="index"
          :selected="showFlagOfReport[index]"
          @on-item-click="createReport(item)"
          >{{ item }}</tab-item
        >
      </tab>
    </div>
    <div style="height: 10px; background-color: rgb(237, 237, 237)" />

    <!--中间主内容-->
    <!-- 填日报 -->
    <div v-show="showFlagOfReport[0]">
      <div class="box">
        <checker
          v-model="pickedType"
          default-item-class="pick-item"
          selected-item-class="pick-item-selected"
        >
          <checker-item
            class="items"
            :value="item"
            v-for="(item, index) in typeItems"
            :key="item"
            >{{ item }}</checker-item
          >
        </checker>
      </div>
      <CreateDayReport
        v-if="pickedType === '日报'"
        :isReallyModifyContentDay="isReallyModifyContentDay"
      ></CreateDayReport>
      <CreateWeekReport
        v-if="pickedType === '周报'"
        :modifyContentWeek="modifyContentWeek"
      ></CreateWeekReport>
      <CreateMonthReport
        v-if="pickedType === '月报'"
        :modifyContentMonth="modifyContentMonth"
      ></CreateMonthReport>
      <CreateYearReport
        v-if="pickedType === '年报'"
        :modifyContentYear="modifyContentYear"
      ></CreateYearReport>
    </div>
    <div v-show="showFlagOfReport[1]">
      <taskManage></taskManage>
    </div>
    <div v-show="showFlagOfReport[2]">
      <tagsManage></tagsManage>
    </div>
  </div>
</template>
<script>
import CreateDayReport from "views-new/students/report/utilPages/CreateDayReport";
import CreateWeekReport from "views-new/students/report/utilPages/CreateWeekReport";
import CreateMonthReport from "views-new/students/report/utilPages/CreateMonthReport";
import CreateYearReport from "views-new/students/report/utilPages/CreateYearReport";
import taskManage from "views-new/students/report/utilPages/TaskManage";
import tagsManage from "views-new/students/report/utilPages/TagsManage";

import { XHeader, Tab, TabItem, Checker, CheckerItem } from "vux";
import group from "api/group";

export default {
  name: "addReport",
  data() {
    return {
      tabItems: ["汇报", "任务管理", "标签管理"],
      showFlagOfReport: this.$store.state.showFlagOfReport, //和tabItems一一对应
      locationTitle: "汇报", //顶部标题栏显示的文字
      isReallyModifyContentDay: this.$route.params.isReallyModifyContentDay, //修改内容
      modifyContentWeek: this.$route.params.modifyContentWeek,
      pickedType: "日报",
      typeItems: ["日报", "周报", "月报", "年报"],
    };
  },
  components: {
    XHeader,
    Tab,
    TabItem,
    CreateDayReport,
    CreateWeekReport,
    CreateMonthReport,
    CreateYearReport,
    taskManage,
    tagsManage,
    Checker,
    CheckerItem,
  },
  mounted() {
  },
  methods: {
    back() {
      this.$store.commit("stageShowFlagOfReport",[true, false, false])
      this.$router.replace("/U_view_all");
    },
    createReport(title) {
      this.locationTitle = title;
      this.tabItems.forEach((element, index) => {
        if (element === title) {
          this.showFlagOfReport[index] = true;
        } else {
          this.showFlagOfReport[index] = false;
        }
      });
      this.$store.commit("stageShowFlagOfReport",this.showFlagOfReport)
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  text-align: center;
  margin-bottom: 10px;
  .pick-item {
    border: 1px solid white;
    padding: 5px 15px;
  }
  .pick-item-selected {
    border: 1px solid green;
  }
}
</style>